<template>
  <div class="Processingtable">
    <!-- 返回栏 -->
    <el-row>
      <el-col :span="19" class="back"></el-col>
      <!-- 按钮 -->
      <el-col :span="5" class="back">
        <el-button plain type="danger" @click="revokeBut"
          >撤销当前操作
        </el-button>
        <el-button plain type="info" @click="resettingBut">重置</el-button>
        <el-button plain type="primary" @click="saveBut">保存</el-button>
        <el-button plain type="warning" @click="this.$router.back()"
          >关闭
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="table-div">
      <el-table
        v-if="loading"
        :data="tableData"
        :scrollbar-always-on="true"
        border
        height="100%"
        stripe
      >
        <el-table-column
          v-for="(itemer, indexer) in titleValue"
          :key="indexer"
          :property="itemer"
          header
        >
          <template v-if="loading" #header="{ column, $index }">
            <el-menu
              :ellipsis="false"
              :popper-append-to-body="false"
              active-text-color="#303133"
              mode="horizontal"
              text-color="#303133"
            >
              <el-sub-menu index="0" style="display: block">
                <template #title>
                  <div>{{ itemer }}</div>
                </template>
                <el-sub-menu
                  v-for="item in dropDown"
                  :key="item.index"
                  :index="item.index + ''"
                >
                  <template v-if="loading" #title>{{ item.name }}</template>
                  <template v-for="ite in item.children" :key="ite.index">
                    <template v-if="ite.children && ite.children.length">
                      <el-sub-menu :index="ite.index + ''">
                        <template #title>{{ ite.name }}</template>
                        <template v-if="ite.children && ite.children.length">
                          <el-menu-item
                            v-for="i in ite.children"
                            :key="i.index"
                            :index="i.index + ''"
                            @click="threeMenu(i.index, column, $index)"
                            >{{ i.name }}
                          </el-menu-item>
                        </template>
                      </el-sub-menu>
                    </template>
                  </template>
                </el-sub-menu>
              </el-sub-menu>
            </el-menu>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageLimit.pageIndex"
      v-model:page-size="pageLimit.pageRow"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :total="pageLimit.totalCount"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { processTab } from "@/services/processtable";

export default {
  name: "DataMiningProcessingtable",
  // inject: ["localVueAvg"],
  data() {
    return {
      tableData: [], //表格数据
      dropDown: [
        {
          index: "1",
          name: "当前列处理",
          children: [
            {
              index: "1-1",
              name: "缺失值处理",
              children: [{ index: "1-1-1", name: "均值代替缺失值" }],
            },
          ],
        },
        {
          index: "2",
          name: "全局处理",
          children: [
            {
              index: "2-1",
              name: "缺失值处理",
              children: [{ index: "2-1-1", name: "均值代替缺失值" }],
            },
          ],
        },
      ],
      titleValue: [],
      averageValue: [], //平均值
      pageLimit: {
        pageIndex: 1, //当前页数
        pageRow: 10, //每页显示条数
        totalCount: 0, //数量
      },
      loading: false,
      averageObj: [], //存数据 标识
      id: "",
      cloned: "",
      newValueList: {},
      type: null,
      total: 0,
      List: [],
    };
  },
  activated() {
    this.cloned = this.$route.query.cloned;
    this.id = this.$route.query.id;
    this.type = this.$route.query.type == 0 ? "FILE" : "DS";
    // this.type = this.$route.query.type;
    let arr = {
      fileId: this.id,
      modelId: this.id,
      opType: this.type,
      pageLimit: this.pageLimit,
    };
    this.proceTable(arr); //调用
  },
  methods: {
    // ?fileId=${id}
    //获取文件表格数据内容
    async proceTable(arr) {
      this.loading = false;
      let res = await processTab(arr);
      if (res?.respCode == 200) {
        this.titleValue = res.respData.colList; //标题
        //数组转对象
        const len = this.$store.state.historys.length;
        if (len > 0) {
          this.tableData = this.$store.state.historys[len - 1].list; //内容
        } else {
          this.newValueList = res.respData.dataList.map((item) => {
            const obj = {};
            for (let i = 0; i < this.titleValue.length; i++) {
              obj[this.titleValue[i]] = item[i];
            }
            return obj;
          });
          this.tableData = this.newValueList; //内容
          this.averageValue = res.respData.average; //平均值 这个是平均值
          this.$store.commit("setaverageValue", this.averageValue); //存平均值
          if (this.$store.state.newAvg.length) {
            //判断有内容时走这个
            this.$store
              .dispatch("setAvgdatas", this.newValueList)
              .then((res) => {
                // this.newValueList = res;
                this.tableData = res ?? [];
              });
          }
        }
        this.pageLimit.totalCount = res.respData.pageLimit.totalCount; //条数
      }
      this.$store.commit(
        "setTableData",
        JSON.parse(JSON.stringify(this.newValueList))
      ); //这里只存了表格数据 平均值没有存 应该是没有 应该是这样
      this.loading = true;
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageLimit.pageRow = val;
      let arr = {
        fileId: this.id,
        pageLimit: {
          pageIndex: this.pageLimit.pageIndex, //当前页数
          pageRow: this.pageLimit.pageRow, //每页显示条数
          totalCount: this.pageLimit.totalCount, //数量
        },
      };
      this.proceTable(arr);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageLimit.pageIndex = val;
      let arr = {
        fileId: this.id,
        pageLimit: {
          pageIndex: this.pageLimit.pageIndex, //当前页数
          pageRow: this.pageLimit.pageRow, //每页显示条数
          totalCount: this.pageLimit.totalCount, //数量
        },
      };
      this.proceTable(arr);
    },
    //  点击出状态弹窗 3级
    threeMenu(i, column, index) {
      let addin = i.slice(0, 1);
      const objs = {
        list: [], //这个是就是原来的historys数组
        property: [], //这个就是的标记（单列前缀avg 加哪一列，例如 avg1为：分数列，avg2为：不知道啥列），如果是全局就agm
        // propertyArr: [], //这个这列的平均数 (单列数组只有一个值，全局是所有列的值)
      };
      const _index = column.getColumnIndex();
      if (addin == 1) {
        //进行undefined放平均值
        //数组转对象
        for (let item of this.tableData) {
          if (item[column.property] == null) {
            item[column.property] = this.averageValue[_index];
            let str = {};
            str[this.cloned] = [_index, "avg"]; //column.property这个这要显示当前列数字
            objs.property.push(str);
            // objs.property.push(column.property, "avg", this.cloned);//最初存avg
            // objs.propertyArr.push(this.averageValue[column.property]);
          }
        }
      }
      if (addin == 2) {
        this.tableData.forEach((item) => {
          //循环数组中每一项
          for (let [itemer, itemName] of this.titleValue.entries()) {
            if (item[itemName] == null) {
              item[itemName] = this.averageValue[itemer];
              // objs.propertyArr.push(this.averageValue[itemer]);
              // let arr = [];
              // arr.push(-1, `avg`, this.cloned);//最初存avg
              // objs.property = arr;
              let arr = [];
              let ste = {};
              ste[this.cloned] = [-1, `avg`];
              arr.push(ste);
              objs.property = arr;
            }
          }
        });
      }
      if (addin) {
        this.$message.success("已求出平均值");
      } else {
        this.$message.error("未求出平均值");
      }
      objs.list = JSON.parse(JSON.stringify(this.tableData));
      // console.log(objs, "修改三级选择");
      this.$store.commit("avergehisd", objs);
    },
    //撤销
    revokeBut() {
      this.$store.dispatch("setAverageDel").then((res) => {
        this.tableData = res;
      }); //调用撤销方法
    },
    //重置
    resettingBut() {
      this.$store.dispatch("reseAverageDel").then((res) => {
        // console.log(res);
        this.tableData = res;
      }); //调用撤销方法
    },
    //保存
    saveBut() {},
  },
};
</script>

<style lang="scss" scoped>
.Processingtable {
  width: 100%;
  height: 100%;

  .table-div {
    width: 100%;
    height: calc(100% - 110px);
    overflow: auto;
    box-sizing: border-box;
  }

  .el-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    box-sizing: border-box;
  }

  .el-menu {
    height: 24px;
  }
}

.router-link-active {
  text-decoration: none;
}

.el-sub-menu {
  width: 100%;
}

a {
  text-decoration: none;
}

.el-row {
  width: 100%;
  height: 50px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .el-button {
    cursor: pointer;
  }
}

:deep(.el-menu--horizontal.el-menu) {
  border: 0px solid #e4e7ed;
  margin-left: 35%;
  box-sizing: border-box;
}

// :deep(.el-menu--collapse .el-menu .el-submenu, .el-menu--popup) {
//   //   display: block !important;
//   min-width: 160px !important;
// }

:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  border: 0px solid #e4e7ed;
}
</style>